<template>
  <div :id="id" :class="className">

  </div>
</template>

<script>
//   import * as echarts from 'echarts';
  export default {
    props: {
      options:Object,
      id:String,
      className:String,
    },
    data: function () {
      return {
        myChart:null,
      }
    },
    watch:{
      options:{
        handler(val){
            this.initOptions();
        },
        deep:true
      }
    },
    methods:{
      initEchats(){
        // 引入基本模板
        let echarts = require('echarts/lib/echarts')
        // 引入饼图组件
        require('echarts/lib/chart/pie')
        require('echarts/lib/chart/bar')
        // 引入提示框和图例组件
        require('echarts/lib/component/tooltip')
        require('echarts/lib/component/title')
        require('echarts/lib/component/legend')
        if(this.id==undefined){
          if(document.getElementsByClassName(this.className)!=undefined){
            for(let i=0;i<document.getElementsByClassName(this.className).length;i++){
              let element = document.getElementsByClassName(this.className)[i];
              this.myChart = echarts.init(element);
              this.initOptions();
            }
          }
        }else{
            this.myChart = echarts.init(document.getElementById(this.id));
            this.initOptions();
        }
      },
      initOptions(){
        if(this.myChart==null||this.options=={}||this.options==undefined) return;
        this.myChart.setOption(this.options);
      }
    },
    mounted: function(){
        setTimeout(() => {
          this.initEchats()
        }, 500);
    }
  }
</script>